<!--
 * @Date: 2025-02-26 09:45:08
 * @LastEditors: 春贰
 * @gitee: https://gitee.com/chun22222222
 * @github: https://github.com/chun222
 * @Desc: 
 * @LastEditTime: 2025-02-27 14:27:42
-->
<script setup>
import { ref } from "vue";
import { invoke,Channel  } from "@tauri-apps/api/core";
import { listen } from '@tauri-apps/api/event';
const showMsg = ref([]);
const  msg_value = ref('');
const com_port = ref("COM3");

//获取当前时间,格式化到毫秒HH:mm:ss:SSS
const  get_time = () => {
  let date = new Date(); 
  return date.toTimeString().split(' ')[0] + '.' + date.getMilliseconds();
}
listen('serial_data', (event) => { 
  //获取当前时间 
  showMsg.value.unshift({
    code:0,
    msg:event.payload,
    time : get_time()
  });
});
 
async function connect_serial_port() { 
 let msg = await invoke("connect_serial_port", { config: {
    com_port: com_port.value,
  }});
  //前面添加
  msg.time = get_time();
  showMsg.value.unshift(msg);
}

//断开
async function disconnect_serial_port() { 
  let msg =  await invoke("disconnect_serial_port", { config: {
    com_port:com_port.value,
  }});
  //前面添加
  msg.time = get_time();
  showMsg.value.unshift(msg);
}

//发送消息
async function send_msg() { 
  let msg = await invoke("send_msg", { config: {
    com_port:com_port.value,
    msg:msg_value.value
  }});
  //前面添加
  msg.time = get_time();
  showMsg.value.unshift(msg);
}
</script>

<template>
  <main class="container"> 
      <div class="btns">
       <div>COM : <input   v-model="com_port" placeholder="输入com_port" /></div>
      <button  @click="connect_serial_port">链接</button> 
      <button  @click="disconnect_serial_port">断开</button>
      </div>

      <div class="btns">
       <div>消息: <textarea v-model="msg_value"  style="width: 500px;height: 100px;" placeholder="输入消息" /></div>
      <button  @click="send_msg">发送消息</button>  
      <button
        @click="()=>{msg_value = msg_value + '[13][10]'}"
      
      >插入\r\n</button>   
      <button
        @click="()=>{msg_value = msg_value + '[10]'}"
      
      >插入\n</button>   

      </div>
      
 
      <div class="msg">
        <p class="line" v-for="item in showMsg" :key="item"> <span :class="'tag tag'+item.code">{{ item.code == 0  ?'成功':'错误' }}</span><span class="text">{{ item.msg }}</span><span class="time">{{ item.time }}</span></p>
      </div>
  </main>
</template>

<style scoped> 

.btns {
  display: flex;
  justify-content: left;
  align-items: center; 
  border-bottom: 1px solid #ebeef5;
}
.btns input {
  width: 100px;
  height:30px;
  line-height: 30px;
  margin-right: 10px;
  padding: 0;
}
.btns button { 
  height: 30px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin: 10px;
  cursor: pointer;
}
.container {
  display: flex;
  flex-direction: column; 
  height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  
}
.msg { 
  width: 100%;
  height: calc(100% - 200px);
  overflow: auto;
}
.line {
  display: flex;
  justify-content: left; 
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
}
.tag {
  padding: 2px;
  border-radius: 5px;
  color: #fff;
  margin-right: 5px;
}
.tag0 {
  background-color: #67c23a;
}
.tag1 {
  background-color: #f56c6c;
}
.text {
  color: #303133;
  width: calc(100% - 200px);
  overflow: auto;
}
</style>
